<div [@routerTransition]>
    <div class="m-content">
        <div class="m-portlet m-portlet--mobile">
            <div class="m-portlet__head">
                <div class="m-portlet__head-caption">
                    <div class="m-portlet__head-title">
                        <h3 class="m-portlet__head-text">
                            查询条件
                        </h3>
                    </div>
                </div>
            </div>
            <div class="m-subheader">
                <div class="row align-items-center">
                    <div class="col-11">
                        <div class="row align-items-center">
                            <div style="width: 20%; min-width: 290px;" class="row">
                                <label class="col-4 col-form-label" style="text-align: right;">供应商名称:</label>
                                <div class="col-8">
                                    <input id="f_SupplierName" #nameInput="ngModel" class="form-control" type="text"
                                        name="f_SupplierName" [(ngModel)]="f_SupplierName" maxlength="32" />
                                </div>
                            </div>
                            <div style="width: 20%; min-width: 290px;" class="row">
                                <label class="col-5 col-form-label" style="text-align: right;">供应商简称:</label>
                                <div class="col-7">
                                    <input id="f_SupplierShortName" #nameInput="ngModel" class="form-control"
                                        type="text" name="f_SupplierShortName" [(ngModel)]="f_SupplierShortName"
                                        maxlength="32" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-1 m--align-right">
                        <button (click)="getBaseField($event)" class="btn btn-primary blue" type="submit">
                            <i class="flaticon-search-1" [attr.aria-label]="l('Search')"> </i> 查询
                        </button>
                    </div>
                </div>
            </div>
            <div class="m-portlet__body" style="border-top: 1px solid #ebedf2;  margin-top: 11px;">
                <div class="m-subheader">
                    <div class="align-items-center row" style="margin: 0;">
                        <div class="col-md-6">
                            <h4 class="m-subheader__title">供应商信息</h4>
                        </div>
                        <div class="col-md-6 m--align-right">
                            <div class="btn-group m-btn-group" role="group" aria-label="...">
                                <button type="button" *ngIf="permission.isGranted('Pages.BaseData.Suppliers.Create')"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditSupplierModal.showinfo(undefined, '工具')">
                                    新增
                                </button>
                                <button [disabled]="!selectedValue"
                                    *ngIf="permission.isGranted('Pages.BaseData.Suppliers.Edit')" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5"
                                    (click)="createOrEditSupplierModal.showinfo(selectedValue.id, '工具')">
                                    编辑
                                </button>
                                <button [disabled]="!selectedValue"
                                    *ngIf="permission.isGranted('Pages.BaseData.Suppliers.Delete')" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="delete()">
                                    删除
                                </button>
                                <button [disabled]="!selectedValue"
                                    *ngIf="permission.isGranted('Pages.BaseData.Suppliers.Edit')" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="start()">
                                    启用
                                </button>
                                <button [disabled]="!selectedValue"
                                    *ngIf="permission.isGranted('Pages.BaseData.Suppliers.Edit')" type="button"
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" (click)="stop()">
                                    停用
                                </button>
                                <button
                                    class="btn btn-default m--padding-left-5 m--padding-right-5" type="button">
                                    <excel-import [showIcon]="false" [btnText]="'导入'" (onUpload)="onUpload($event)">
                                    </excel-import>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tabbable-line">
                    <div class="tab-content" style="padding-top:0;">
                        <div class="tab-pane active" id="tab-model">
                            <div class="row align-items-center">
                                <div class="primeng-datatable-container" [busyIf]="primengTableHelper.isLoading">
                                    <p-table #dataTable (onLazyLoad)="getBaseField($event)"
                                        [value]="primengTableHelper.records"
                                        [rows]="primengTableHelper.defaultRecordsCountPerPage" [paginator]="false"
                                        [lazy]="true" [scrollable]="true" ScrollWidth="100%"
                                        [responsive]="primengTableHelper.isResponsive"
                                        [resizableColumns]="primengTableHelper.resizableColumns"
                                        [(selection)]="selectedValue" selectionMode="single"
                                        (onRowSelect)="rowSelect()">
                                        <ng-template pTemplate="header">
                                            <tr>
                                                <th style="width: 40px">
                                                    序号
                                                </th>
                                                <ng-container *ngFor="let ext of extensions">
                                                    <th width="{{ ext.width }}">
                                                        {{ ext.title }}
                                                    </th>
                                                </ng-container>
                                            </tr>
                                        </ng-template>

                                        <ng-template pTemplate="body" let-record="$implicit" let-i="rowIndex">
                                            <tr [pSelectableRow]="record">
                                                <td style="width: 40px">
                                                    {{ i + 1 + paginator.first }}
                                                </td>
                                                <ng-container *ngFor="let ext of extensions">
                                                    <ng-container [ngSwitch]="ext.formatType">
                                                        <ng-container *ngSwitchCase="1">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | number: '1.0-0' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchCase="2">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | number: '1.2-2' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchCase="4">
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] | momentFormat: 'YYYY-MM-DD' }}
                                                            </td>
                                                        </ng-container>
                                                        <ng-container *ngSwitchDefault>
                                                            <td width="{{ ext.width }}">
                                                                {{ record[ext.key] }}
                                                            </td>
                                                        </ng-container>
                                                    </ng-container>
                                                </ng-container>
                                            </tr>
                                        </ng-template>
                                    </p-table>

                                    <div class="primeng-paging-container">
                                        <p-paginator [rows]="20" #paginator (onPageChange)="getBaseField($event)"
                                            [totalRecords]="primengTableHelper.totalRecordsCount"
                                            [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                        </p-paginator>
                                        <span class="total-records-count">
                                            {{ l('TotalRecordsCount', primengTableHelper.totalRecordsCount) }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <createOrEditSupplierModal #createOrEditSupplierModal (modalSave)="getBaseField()"></createOrEditSupplierModal>
</div>